<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>谷歌吃豆人</title>
  <script>
    window.google = {}
  </script>
   <script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?1e6b54e22f8dbb95bb10234f0de47ea1";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
  <style>
    body{background:#222;font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;}
    .app{
      display: flex;
      margin-top: 70px;
      align-items: center;
      flex-direction: column;
    }
    .zoom{
      display: flex;
      justify-content: space-between;
    }
    .zoom div{
      display: flex;
      align-items: baseline;
    }
    .zoom span, .zoom div a{
      color: #FFF;
      font-weight: bold;
    }
    .zoom button{
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      border: none;
      font-size: 0.8em;
      margin-left: 5px;
      color: #000;
      background-color: #FFF;
      border-radius: 3px;
    }
    td{line-height:.8em;}
    form{margin-bottom:20px;}
    input{font-family:inherit;-moz-box-sizing:content-box}
    a{color:#11c;text-decoration:none}
    a:hover,a:active{text-decoration:underline}
    a:visited{color:#551a8b}
    #logo{width:554px;height:186px;background:black url(pacman/src/pacman10-hp.gif) 0 0 no-repeat;position:relative;margin-bottom:9px}
    #logo-l{width:200px;height:2px;left:177px;top:157px;background:#990;position:absolute;display:none;overflow:hidden}
    #logo-b{position:absolute;left:0;background:#ff0;height:8px;width:0}
    #wrapper{width:554px;height:186px;padding:10px;background:#000;-webkit-border-radius:8px;margin-bottom: 80px;}
    .lsb:active{background:-webkit-gradient(linear,left top,left bottom,from(#ccc),to(#ddd))}
    .ds{display:-moz-inline-box}
    .ds{border-bottom:solid 1px #e7e7e7;border-right:solid 1px #e7e7e7;display:inline-block;margin:3px 0 4px;margin-left:4px;margin-right:3px:height:32px}
    .lsbb{background:#eee;border:solid 1px;border-color:#ccc #999 #999 #ccc;height:30px;display:block}
    .lsb{background:url(/images/srpr/nav_logo13.png) bottom;font:15px arial,sans-serif;border:none;cursor:pointer;height:30px;margin:0;outline:0;vertical-align:top}
    .lsb:active{background:#ccc}
    #footer {
      display: flex;
      width: 100%;
      justify-content: center;
      position: fixed;
      bottom: 0;
    }
    #footer ul{list-style-type:none;padding:0}
    #footer a{display:inline-block;color:#444;font-size:10pt;font-family:monospace;padding:5px}
    #footer a:hover{color:#666;text-decoration:none;background:#333}
  </style>
</head>
<body>
  <div class="zoom">
    <div>
      <span>缩放</span>
      <button onClick='zoom.up()'>大</button>
      <button onclick="zoom.down()">小</button>
    </div>
    <div>
      <a href="index.html">反馈</a>
    </div>
  </div>
  <div class='app'>
  <div id="wrapper">
  	<a href="#gameover" id="dlink"></a>
  	<div id='logo' title="PAC-MAN's 30th Birthday! Doodle with PAC-MAN™ & ©1980 NAMCO BANDAI Games Inc.">
  		<div id="logo-l">
  			<div id="logo-b">
  			</div>
  		</div>
    </div>
  </div>
	<script>
	  google.dom = {};
    google.pacManSound = true;
    google.browser = {};
    google.browser.engine = {}

    google.dom.remove = function (a) {
    return a && a.parentNode && a.parentNode.removeChild(a)
    };

    google.dom.append = function (a) {
    return document.body.appendChild(a)
    };

    google.browser.engine.IE = false
    google.pml = function () {
      function d(a) {
        if (!google.pml_installed) {
          google.pml_installed = true;
          if (!a) {
            document.getElementById("logo").style.background = "black";
            window.setTimeout(function () {
              var b = document.getElementById("logo-l");
              if (b) b.style.display = "block"
            }, 400)
          }
          a = document.createElement("script");
          a.type = "text/javascript";
          //载入脚本
          a.src = "pacman/src/js/pacman10-hp.3.js";
          document.body.appendChild(a)
        }
      }
      function e() {
        if (document.f && document.f.btnI) document.f.btnI.onclick = function () {
            typeof google.pacman != "undefined" ? google.pacman.insertCoin() : d(false);
            return false
        }
      }
      if (!google.pml_loaded) {
        google.pml_loaded = true;
        window.setTimeout(function () {
          document.f && d(true)
        }, 1E4);
        e();
      }
    };
    const zoom = {
      base: 1,
      el: document.querySelector('#wrapper'),
      up: function () {
        this.el.style.transform = 'scale(' + (this.base += 0.1) + ')';
      },
      down: function () {
        this.el.style.transform = 'scale(' + (this.base -= 0.1) + ')';
      }
    }
	</script>
	
  <form action="#submit" name='f'>
    <table width="23%" cellpadding='0' cellspacing='0'>
      <tr valign='top'>
        <td align='center' nowrap><br style="line-height:0">
          <span class='ds'>
            <span class='lsbb'>
              <input title="单人投币一次，双人两次" name='btnI' type='submit' value="投币 (Insert Coin)" class='lsb'>
            </span>
          </span>
        </td>
      </tr>
    </table>
  </form>
  
  <div id="footer">
    <ul>
      <li><a href="index.html">HTML5 Sound zhangxiaolei</a></li>
      <li><a href="http://github.com/macek/google_pacman">GitHub macek/google_pacman</a></li>
      <li><a href="http://google.com">&copy; 2010, Google</a></li>
      <li><a href="http://pacman.com">&copy; 1980, NAMCO BANDAI Games Inc.</a></li>
    </ul>
  </div>
  
  <script>google.pml && google.pml()</script>
  </div>
</html>
